<template>
	<view class="LearnCopy">
		<!-- 用户信息 -->
		<view class="LearnCopy-userinfo margin flex align-center">
			<view class="bg-grey round">
				<image :src="getUserInfoValue.avatar" mode="aspectFill"></image>
			</view>
			<view style="flex: auto;" class="text-sm text-cut margin-left-xs">{{getUserInfoValue.nickName || '用户昵称'}}
			</view>
		</view>
		<!-- 阅读分享 -->
		<view class="LearnCopy-share  bg-white margin padding">
			<view class="text-bold text-black text-center">{{dayjsFormat}}阅读分享</view>
			<view class="LearnCopy-flex  margin-tb flex align-center justify-between">
				<view class="text-center">
					<view><text class="text-bold text-black ">{{historyValue.readDays}}</text><text
							class="text-sm">天</text></view>
					<view class="text-sm">阅读天数</view>
				</view>
				<view class="text-center">
					<view><text class="text-bold text-black ">{{historyValue.todayRead}}</text><text
							class="text-sm">本</text></view>
					<view class="text-sm">今日阅读</view>
				</view>
				<view class="text-center">
					<view><text class="text-bold text-black ">{{historyValue.monthRead}}</text><text
							class="text-sm">本</text></view>
					<view class="text-sm">本月阅读</view>
				</view>
			</view>
			<view class="LearnCopy-btns flex align-center justify-between">
				<button @click="showModal=true" class="cu-btn bg-orange">加群领取绘本</button>
				<button @click="navToHomeFn" class="cu-btn bg-orange">去看绘本</button>
			</view>
		</view>
		<!-- 今日阅读 -->
		<view class="LearnClock-today text-center margin text-orange bg-white padding">今日打卡</view>
		<!-- 所有人打卡记录 -->
		<view v-for="item in rbdOption.value" :key="item.id" class="margin radius bg-white padding">
			<view class="flex align-center">
				<view class="cu-avatar round lg " :class="[item.userInfo ? '':'rloading']"
					:style="[{ backgroundImage:'url(' + item.userInfo.avatar + ')' }]">
					<view v-if="item.userInfo.isVip" class="cu-tag badge cuIcon-vip text-red"></view>
				</view>
				<view v-if="item.userInfo" style="flex: auto;" class="margin-left">
					<view>{{item.userInfo.nickName}}</view>
					<view class="margin-top-xs text-sm">{{item.created | dayjs}}</view>
				</view>
				<view v-else class="rloading margin-left" style="flex: auto;height: 40upx;"></view>
			</view>
			<view v-if="item.content && item.userInfo" class="margin-tb-sm">
				{{item.content}}
			</view>
			<view v-if="!item.id" style="height: 100upx;" class="rloading margin-tb-sm"></view>
			<scroll-view class="margin-tb-sm"  v-if="item.bookList && item.bookList.length>0" scroll-x="true">
				<view style="flex-wrap: nowrap;" class="flex align-center">
					<view @click="navToReadFn(itemList)" style="width: 200upx;" class="margin-lr-xs"
						v-for="itemList in item.bookList" :key="itemList.id">
						<view style="height:300upx; width: 200upx;min-width: 200upx;">
							<image style="width: 100%;height: 100%;" :src="itemList.cover" mode="aspectFill"></image>
						</view>
						<view class="text-cut">{{itemList.name}}</view>
					</view>
				</view>
			</scroll-view>
			<view v-if="item.userInfo" style="border-top: 1upx dashed #333;" class="padding-top-sm margin-top">
				<text class="cuIcon-calendar margin-right-xs"></text>打卡第{{item.clockInCnt}}天
			</view>
		</view>
		<Divider v-if="rbdOption.value.length==0" text="暂无数据" />
		<!-- ios兼容 -->
		<view class="ios-safe"></view>
		<!-- 展示二维码 -->
		<ImageModal @cancel="showModal=false" :show="showModal" :value="modal.wechatGroupQrCode"></ImageModal>
	</view>
</template>

<script>
	import CardGird from '@/plugin/card_grid.vue';
	import Divider from '@/plugin/divider.vue';
	import ImageModal from '@/plugin/image_modal.vue'

	import * as readHistoryApi from '@/api/ReadHistory/index.js';
	import * as userInfoApi from '@/api/UserInfo/index.js';
	import * as api from '@/api/LearnCopy/index.js';

	import UserInfoConfig from '@/utils/userInfo_config.js';
	import ReachBottomDistance from '@/utils/reach_bottom_distance.js';

	import Share from '@/utils/share.js';

	import dayjs from '@/utils/dayjs.min.js';
	export default {
		mixins: [UserInfoConfig, ReachBottomDistance, Share],
		components: {
			CardGird,
			Divider,
			ImageModal
		},
		filters: {
			dayjs(val) {
				return dayjs(val).format("DD-MM")
			}
		},
		computed: {
			dayjsFormat() {
				return dayjs(Date.now()).format('YYYY年MM月DD日')
			}
		},
		data() {
			return {
				historyValue: {},
				showModal: false,
				modal: {},
				// 分享
				share: {
					title: '英文书架',
					path: '/pages/LearnCopy/index', // 全局分享的路径
					imageUrl: '', // 全局分享的图片(可本地可网络)
				}
			}
		},
		onLoad() {
			this.getHistory();
			this.rbdLoadingFn();
			this.getSetting();
		},
		methods: {
			// 前往阅读
			navToReadFn(value) {
				uni.navigateTo({
					url: '/pages/ReadBook/index?id=' + value.id
				})
			},
			// 前往首页
			navToHomeFn() {
				uni.switchTab({
					url: '/pages/EnglishBookshelf/index'
				})
			},
			// 获取二维码
			async getSetting() {
				let res = await userInfoApi.setting();
				if (res.code == 0) {
					this.modal = res.data
				}
			},
			// 打卡记录
			async rbdReqeust(params) {
				return api.list(params.page, params.pageSize);
			},
			// 获取阅读记录
			async getHistory() {
				let res = await readHistoryApi.readSummary();
				if (res.code !== 0) return false;
				let {
					list,
					...params
				} = res.data;
				this.historyValue = params;
			},
		}
	}
</script>

<style lang="scss">
	.LearnCopy {
		.LearnCopy-userinfo {
			>view:first-child {
				width: 80upx;
				height: 80upx;
				overflow: hidden;

				>image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.LearnCopy-share {
			border-radius: 16upx;

			>view {
				flex: 1;
			}

			.LearnCopy-flex {
				view:first-child {
					line-height: 40upx;

					>text {
						display: inline-block;
						vertical-align: bottom;
					}
				}
			}

			.LearnCopy-btns {
				button {
					min-width: 260upx;
				}
			}
		}

		.LearnClock-today {
			border-radius: 16upx;
		}
	}
</style>